<template>
    <!-- pages/redenvelope/index.wxml -->
    <view>
        <van-tabs
            :active="active"
            @change="onChange"
            title-active-color="#333333"
            title-inactive-color="#999999"
            nav-class="nav-class"
            custom-class="custom-class"
            :ellipsis="false"
        >
            <van-tab title="发红包">
                <view class="redenvelope">
                    <view class="bg-f" :data-item="item" @tap="onDetails" v-for="(item, index) in RedbagList" :key="index">
                        <view class="envelopebox">
                            <view class="mr-10">
                                <image v-if="item.type == 1" class="img" :src="imgUrl + 'ordinary.png'"></image>
                                <image v-if="item.type == 0" class="img" :src="imgUrl + 'luck.png'"></image>
                            </view>
                            <view>
                                <view class="re-title ml-10 text-oline" style="margin-bottom: 6rpx; margin-top: 6rpx">{{ item.title }}</view>
                                <view class="centers ml-10">
                                    <view class="centers mr-90">
                                        <text class="e-text1">发包金额:</text>
                                        <text :class="'e-text2 ' + (item.status == 2 ? 'e-color' : '')">
                                            ￥
                                            <text :class="'e-text3 ' + (item.status == 2 ? 'e-color' : '')">{{ item.totalamount }}</text>
                                        </text>
                                    </view>
                                    <view class="cneters">
                                        <text class="e-text1">发包数量:</text>
                                        <text :class="'e-text3 ' + (item.status == 2 ? 'e-color' : '')">{{ item.grantquantity }}</text>
                                    </view>
                                </view>

                                <view :class="'centers rd-box mt-10 ' + (item.status == 2 ? 'bg-color' : '') + ' ' + (item.status == 0 ? 'rd-boxs' : '')">
                                    <view class="cneters" v-if="item.status != 0">
                                        <text class="e-text1">已领取</text>
                                        <text :class="'e-text2 ' + (item.status == 2 ? 'e-color' : '')">{{ item.receivequantity }}</text>
                                        <text class="e-text1">/{{ item.grantquantity }}</text>
                                    </view>
                                    <view class="centers" v-if="item.status != 0">
                                        <text class="e-text1">推荐新人:</text>
                                        <text class="e-text1">{{ item.recommendNewPerson ? item.recommendNewPerson : 0 }}</text>
                                    </view>
                                    <view class="bagbtns" v-if="item.status == 0">
                                        <view class="bagbtncsloe" @tap.stop.prevent="onDlete" :data-index="index" :data-id="item.id">删除</view>
                                    </view>
                                    <view class="bagbtn" v-if="item.status == 2" :data-id="item.id" :data-index="index" @tap.stop.prevent="onDlete">删除</view>
                                    <view v-if="item.status == 1" @tap.stop.prevent="shop">
                                        <button class="bagbtn" :data-id="item.id" open-type="share" data-name="红包" :data-title="item.title">分享好友</button>
                                    </view>
                                    <view v-if="item.status == 0" @tap.stop.prevent="goPay">
                                        <view class="bagbtn" :data-item="item" open-type="share">立即支付</view>
                                    </view>
                                </view>
                            </view>
                            <view :class="item.status == 2 ? 'statustext1' : 'statustext'">
                                <text v-if="item.status == 0">待支付</text>
                                <text v-if="item.status == 1">派发中</text>
                                <text v-if="item.status == 2">已结束</text>
                            </view>
                            <!-- <view wx:if="{{item.type == 1}}" class="typebox">
              <image class="type-img" src="{{imgUrl + 'lucktit.png'}}"></image>
              <text class="type-text">拼手气</text>
            </view>
            <view wx:if="{{item.type == 0}}" class="typebox">
              <image class="type-img" src="{{imgUrl + 'ordinarytit.png'}}"></image>
              <text class="type-text">普通包</text>
            </view> -->
                        </view>

                        <view class="centers re-text" v-if="item.status > 0 && item.status == 2 && item.remainingquantity != 0">
                            <image class="mr-10 icon-24" :src="imgUrl + 'hint.png'"></image>
                            <view class="centers">{{ item.remainingquantity }}个红包未被领取，剩余金额已退回余额</view>
                        </view>
                    </view>
                </view>
                <view class="rd-btn" @tap="toGive">发红包</view>
            </van-tab>
            <van-tab title="现金券">
                <view class="cashtabbox">
                    <text :class="'cashtab ' + (cashtabindex == 0 ? 'cashtabactive' : '')" @tap="onCashtab" data-index="0">可用现金券</text>
                    <text :class="'cashtab ' + (cashtabindex == 1 ? 'cashtabactive' : '')" @tap="onCashtab" data-index="1">已分享现金券</text>
                </view>
                <view class="cash">
                    <!-- 暂时设置0禁止右滑 -->
                    <van-swipe-cell :right-width="0" @close="onClose" class="mt-20" v-for="(item, index) in CouponList" :key="index">
                        <view class="cardbox">
                            <view class="card">现金券</view>
                            <view class="centers mb-20">
                                <view class="box1 centers">
                                    <view class="centers">
                                        <text class="my-1 mr-20">¥</text>
                                        <text class="my-2">{{ item.deduction }}</text>
                                    </view>
                                </view>
                                <view class="box2">
                                    <!-- <view class="type">{{item.content}}</view> -->
                                    <view class="type">现金抵用券</view>
                                    <view class="scope">有效期内可用｜全平台可用</view>
                                    <view class="time">有效期 永久有效</view>
                                </view>
                                <view class="text c-text3 centers" v-if="item.status == 0">{{ item.number ? item.number : '0' }}张</view>
                                <view>
                                    <view class="status-text1" v-if="item.status == 1">已领取</view>
                                    <view class="status-text2" v-if="item.status == 2">派发中</view>
                                    <view class="status-text3" v-if="item.status == 3">已退回</view>
                                    <view v-if="item.status == 2" @tap.stop.prevent="onRepeal" class="repeal" :data-id="item.id">撤销</view>
                                    <view v-if="item.status == 0" @tap.stop.prevent="shop">
                                        <button class="btn" data-name="现金券" :data-id="item.id" open-type="share" :data-deduction="item.deduction">分享好友</button>
                                    </view>
                                </view>
                            </view>
                            <view class="outmoded" v-if="item.status == 1">{{ item.receiveTime }} 已被{{ item.receiver }}领取</view>
                            <view class="outmoded" v-if="item.status == 2">{{ item.shareTime }} 被分享</view>
                            <view class="outmoded" v-if="item.status == 3">{{ item.backTime || '' }} 超过24小时未领取，已退回可用现金券</view>
                        </view>

                        <view slot="right" class="right" v-if="item.status == 1">
                            <text>删除</text>
                        </view>
                    </van-swipe-cell>
                </view>
            </van-tab>
        </van-tabs>
        <van-overlay :show="show" @click="onClickHide">
            <view class="wrapper">
                <view class="wrapperbox">
                    <view class="centers hb-title" @tap.stop.prevent="mpsj">
                        <image class="headimg" :src="drawList.headportrait"></image>
                        <text>{{ drawList.name }}发出的红包</text>
                    </view>
                    <image @tap.stop.prevent="mpsj" class="hb-bg" :src="imgUrl + 'hb-bg.png'"></image>
                    <view class="hb-btn" @tap.stop.prevent="toHome">
                        <image class="btnimg" :src="imgUrl + 'hb-btn.png'"></image>
                        <text>去使用</text>
                    </view>
                    <view class="money" @tap.stop.prevent="mpsj">
                        <text>￥</text>
                        <text>{{ drawmoney[0].money }}</text>
                    </view>
                    <view class="hb-text1" @tap.stop.prevent="mpsj">红包已存入余额快去使用吧~</view>
                    <view class="hb-text" @tap.stop.prevent="mpsj">红包已存入余额</view>
                    <view @tap.stop.prevent="mpsj" class="hx"></view>
                    <view class="icon" @tap.stop.prevent="onClickHide">
                        <van-icon name="close" size="60rpx" color="white" />
                    </view>
                </view>
            </view>
        </van-overlay>
        <van-overlay :show="showCash" @click="onClickHideCash">
            <view class="wrapper">
                <view class="wrapperbox">
                    <view class="centers hb-title1" @tap.stop.prevent="mpsj">
                        <image class="headimg" :src="drawList.headportrait"></image>
                        <text>您已领取好友发出的现金券</text>
                    </view>
                    <image @tap.stop.prevent="mpsj" class="hb-bg" :src="imgUrl + 'hb-bg.png'"></image>
                    <view class="hb-btn" @tap.stop.prevent="toHome">
                        <image class="btnimg" :src="imgUrl + 'hb-btn.png'"></image>
                        <text>去使用</text>
                    </view>
                    <view class="money1" @tap.stop.prevent="mpsj">
                        <text>{{ showCashname }}</text>
                    </view>
                    <!-- <view class="hb-text1" catchtap="mpsj">现金券已存入优惠券卡包快去使用吧~</view> -->
                    <view class="hb-text2" @tap.stop.prevent="mpsj">红包已存入优惠券卡包</view>
                    <view @tap.stop.prevent="mpsj" class="hx"></view>
                    <view class="icon" @tap.stop.prevent="onClickHideCash">
                        <van-icon name="close" size="60rpx" color="white" />
                    </view>
                </view>
            </view>
        </van-overlay>

        <van-overlay :show="overlayshow" @click="onClickHidegive">
            <view class="wrapper">
                <view class="wrappergivebox">
                    <image class="give-bg" :src="imgUrl + 'give-bg.png'"></image>
                    <view class="give-text1">
                        <view>{{ overlayshowdata.title }}</view>
                        <!-- <view>快来抢吧~</view> -->
                    </view>
                    <view class="give-text2">￥{{ overlayshowdata.totalamount }}</view>
                    <view class="give-text3">{{ overlayshowdata.type == 0 ? '普通包' : '拼手气' }}，共{{ overlayshowdata.grantquantity }}个！</view>
                    <button open-type="share" :data-id="overlayshowdata.id" class="hbgive-btn" data-name="红包" :data-title="overlayshowdata.title">
                        <image class="btnimg" :src="imgUrl + 'hb-btn.png'"></image>
                        <text>去分享</text>
                    </button>
                    <view class="icon1" @tap.stop.prevent="onClickHidegive">
                        <van-icon name="close" size="60rpx" color="white" />
                    </view>
                </view>
            </view>
        </van-overlay>
    </view>
</template>

<script>
// pages/redenvelope/index.js
const app = getApp(); // 引入app

import _request from '../../utils/request.js';
export default {
    data() {
        return {
            pageNo: 1,
            pageSize: 10,
            imgUrl: app.globalData.imgUrl,

            //全局img路径
            RedbagList: [],

            CouponList: [],
            show: false,
            invitecode: '',
            active: 0,
            redbagData: null,
            page: 1,
            showCash: false,
            CashObj: null,
            showCashname: '',
            overlayshow: false,
            redbagData: '',
            cursor: 0,
            shareinvitecode: '',

            // 接受到的邀请码
            // 现金券高亮
            cashtabindex: 0,

            overlayshowdata: {
                title: '',
                totalamount: '',
                type: 0,
                grantquantity: '',
                id: ''
            },

            drawList: {
                headportrait: '',
                name: ''
            },

            money: ''
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {
        let that = this;

        if (options.invitecode) {
            this.setData({
                shareinvitecode: options.invitecode
            });
            uni.setStorageSync('code', options.invitecode);
        }

        let releaseVersion = uni.getAccountInfoSync().miniProgram.envVersion == 'release'; // 现金券

        if (options.redbagId && options.deduction) {
            uni.showModal({
                content: '请前往意约用户端领取现金券',

                success(res) {
                    if (res.confirm) {
                        uni.navigateToMiniProgram({
                            appId: 'wxfbcf1e975276f70d',
                            //要打开的小程序appid
                            path:
                                '/pages/redenvelope/index?beShared=' +
                                options.beShared +
                                '&redbagId=' +
                                options.redbagId +
                                '&deduction=' +
                                options.deduction +
                                '&sharetime=' +
                                options.sharetime +
                                '&invitecode=' +
                                options.invitecode,
                            imageUrl: '/static/images/hblogo.png',
                            envVersion: releaseVersion ? 'release' : 'trial',

                            //打开小程序的版本（体验版trial；开发版develop；正式版release）
                            success(res) {
                                //打开成功之后事件
                            }
                        });
                    } else if (res.cancel) {
                    }
                }
            }); // _request.postObj('/userCoupon/getCashVoucher', {
            //   id: options.redbagId,
            //   userId: wx.getStorageSync('userid'),
            //   beShared: options.beShared,
            //   sharetime: options.sharetime
            // }).then((res) => {
            //   // 成功回调
            //   if (res.data.code == 200) {
            //     vm.setData({
            //       showCash: true,
            //       showCashname: options.deduction,
            //       CashObj: res.data.data
            //     })
            //   } else {
            //     wx.showToast({
            //       title: res.data.message,
            //       duration: 1000,
            //       icon: 'none',
            //     })
            //   }
            // }).catch((error) => {
            //   console.log(error, 'error');
            // })
        } else if (options.redbagId && options.invitecode) {
            // 红包
            uni.showModal({
                content: '请前往意约用户端领取红包',

                success(res) {
                    if (res.confirm) {
                        uni.navigateToMiniProgram({
                            appId: 'wxfbcf1e975276f70d',
                            //要打开的小程序appid
                            path: '/pages/redenvelope/index?beShared=' + options.beShared + '&redbagId=' + options.redbagId + '&invitecode=' + options.invitecode,
                            imageUrl: '/static/images/hblogo.png',
                            envVersion: releaseVersion ? 'release' : 'trial',

                            //打开小程序的版本（体验版trial；开发版develop；正式版release）
                            success(res) {
                                //打开成功之后事件
                            }
                        });
                    } else if (res.cancel) {
                    }
                }
            }); // wx.login({
            //   success: (res) => {
            //     _request.postObj('/redbagShare/draw', {
            //       redbagId: options.redbagId,
            //       userId: wx.getStorageSync('userid'),
            //       code: res.code
            //     }).then((res) => {
            //       // 成功回调获取金额
            //       if (res.data.code == 200) {
            //         _request.postObj('/redbagShare/getDetail', {
            //           redbagId: options.redbagId,
            //           userId: wx.getStorageSync('userid'),
            //         }).then((res) => {
            //           // 成功回调
            //           if (res.data.code == 200) {
            //             let data = res.data.data.redbagDrawRecords.filter(item => {
            //               return item.userId == wx.getStorageSync('userid')
            //             })
            //             vm.setData({
            //               show: true,
            //               drawList: res.data.data,
            //               drawmoney: data
            //             })
            //           } else {
            //             wx.showToast({
            //               title: res.data.message,
            //               duration: 1000,
            //               icon: 'none',
            //             })
            //           }
            //         }).catch((error) => {
            //           console.log(error, 'error');
            //         })
            //       } else {
            //         wx.showToast({
            //           title: res.data.message,
            //           duration: 2000,
            //           icon: 'none',
            //         })
            //       }
            //     }).catch((error) => {
            //       console.log(error, 'error');
            //     })
            //   }
            // })
        }

        if ((options.redbagId && options.deduction) || (options.redbagId && options.invitecode)) {
        } else {
            // 获取邀请码
            _request
                .get('/recomUser/findReCode', {
                    userId: uni.getStorageSync('userid')
                })
                .then((res) => {
                    this.setData({
                        invitecode: res.data.data.invitecode
                    });
                })
                .catch((error) => {
                    console.log(error, 'error');
                });
        }
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {
        let that = this;
        this.setData({
            active: Number(app.globalData.redenvelopeactive)
        });
        this.setData({
            overlayshow: app.globalData.overlayshow
        });

        if (app.globalData.overlayshowdata) {
            this.setData({
                overlayshowdata: app.globalData.overlayshowdata
            });
        }

        if (this.shareinvitecode) {
        } else {
            if (this.active == 0) {
                //如果是红包列表
                that.setData({
                    page: 1
                });
                that.getRedbagShare(1, false);
            } else {
                //如果是现金券列表
                that.setData({
                    pageNo: 1
                });
                that.getUserCoupon(false);
            }
        }
    },
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {
        app.globalData.overlayshowdata = false;
    },
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {
        app.globalData.overlayshow = false;
    },
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {
        if (this.active == 0) {
            //如果是红包列表
            this.setData({
                page: 1
            });
            this.getRedbagShare(1, false);
        } else {
            //如果是现金券列表
            this.setData({
                pageNo: 1
            });

            if (this.cashtabindex == 1) {
                this.getShareCoupon();
            } else {
                this.getUserCoupon();
            }
        }

        uni.stopPullDownRefresh(); //停止下拉刷新
    },
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {
        if (this.active == 0) {
            this.setData({
                page: this.page + 1
            });
            this.getRedbagShare(this.page, false);
        } else {
            this.setData({
                pageNo: this.pageNo + 1
            });

            if (this.cashtabindex == 1) {
                this.getShareCoupon();
            } else {
                this.getUserCoupon();
            }
        }
    },
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function (res) {
        let redbagId = res.target.dataset.id || '';
        let userid = uni.getStorageSync('userid');
        let name = res.target.dataset.name;
        const { invitecode } = this; // 设置菜单中的转发按钮触发转发事件时的转发内容

        if (res.from === 'button') {
            // 来自页面内转发按钮
            this.setshareCashCoupon(redbagId);
        }

        if (name == '红包') {
            let mTitle = res.target.dataset.title;
            return {
                title: mTitle ? mTitle : '我在意约发了个大红包！',
                // 默认是小程序的名称
                path: '/pages/redenvelope/index?template=7&share=BAGRED&userId=' + userid + '&redbagId=' + redbagId + '&invitecode=' + invitecode,
                imageUrl: '/static/images/hblogo.png',
                success: function (res) {}
            };
        } else if (name == '现金券') {
            let deduction = res.target.dataset.deduction;
            let timestamp = new Date().valueOf();
            return {
                title: '我在意约发了现金券,快来抢吧！',
                // 默认是小程序的名称
                path:
                    '/pages/redenvelope/index?template=7&share=BAGRED&beShared=' +
                    userid +
                    '&redbagId=' +
                    redbagId +
                    '&deduction=' +
                    deduction +
                    '&sharetime=' +
                    timestamp +
                    '&invitecode=' +
                    invitecode,
                imageUrl: '/static/images/hblogo.png',
                success: function (res) {}
            };
        }
    },
    methods: {
        // 点击关闭红包页
        onClickHidegive() {
            this.setData({
                overlayshow: false
            });
        },

        // 去支付
        goPay(e) {
            this.setData({
                redbagData: e.target.dataset.item
            });
            let obj = JSON.stringify(e.target.dataset.item);
            uni.navigateTo({
                url: '/pages/redenvelope/giveredenvelope/pay/index?data=' + encodeURIComponent(obj)
            });
        },

        // 点击关闭红包页
        onClickHide() {
            this.setData({
                show: false
            });
        },

        // 点击关闭红包页
        onClickHideCash() {
            this.setData({
                showCash: false
            });
        },

        // 前往发红包页面
        toGive() {
            // 关闭红包弹窗
            app.globalData.overlayshow = false;
            uni.navigateTo({
                url: '/pages/redenvelope/giveredenvelope/index'
            });
        },

        // 去首页使用
        toHome() {
            uni.switchTab({
                url: '/firstpages/home/index'
            });
        },

        // 详情页
        onDetails(e) {
            const { item } = e.currentTarget.dataset;
            let obj = JSON.stringify(item);
            uni.navigateTo({
                url: '/pages/redenvelope/details/index?data=' + obj
            });
        },

        // 删除红包
        onDlete(e) {
            _request
                .postObj('/redbagShare/delete', {
                    redbagId: e.currentTarget.dataset.id,
                    userId: uni.getStorageSync('userid')
                })
                .then((res) => {
                    if (res.data.code == 200) {
                        let list = this.RedbagList;
                        list.splice(e.currentTarget.dataset.index, 1);
                        this.setData({
                            RedbagList: list
                        });
                    }
                })
                .catch((error) => {});
        },

        // 获取发出红包列表
        getRedbagShare(e, show) {
            if (show) {
                uni.showNavigationBarLoading(); // 顶部加载状态
            }

            _request
                .get('/redbagShare/list', {
                    type: 0,
                    pageNo: e,
                    pageSize: 10,
                    userId: uni.getStorageSync('userid')
                })
                .then((res) => {
                    this.setData({
                        RedbagList: e > 1 ? [...this.RedbagList, ...res.data.data] : res.data.data
                    });

                    if (show) {
                        uni.hideNavigationBarLoading(); //完成停止加载

                        uni.stopPullDownRefresh(); //停止下拉刷新
                    }
                })
                .catch((error) => {
                    if (show) {
                        uni.hideNavigationBarLoading(); //完成停止加载

                        uni.stopPullDownRefresh(); //停止下拉刷新
                    }

                    console.log(error, 'error');
                });
        },

        onChange(e) {
            app.globalData.redenvelopeactive = e.detail.index;
            this.setData({
                active: e.detail.index
            });

            if (this.active != e.detail.index) {
                return;
            }

            if (this.active == 0) {
                //如果是红包列表
                this.setData({
                    RedbagList: [],
                    page: 1,
                    cashtabindex: 0
                });
                this.getRedbagShare(this.page, false);
            } else {
                //如果是现金券列表
                this.setData({
                    CouponList: [],
                    pageNo: 1
                });
                this.getUserCoupon();
            }
        },

        // 切换现金类型
        onCashtab(e) {
            this.setData({
                cashtabindex: e.currentTarget.dataset.index,
                pageNo: 1
            });

            if (e.currentTarget.dataset.index == 1) {
                this.getShareCoupon();
            } else {
                this.getUserCoupon();
            }
        },

        // 获取已分享现金券
        getShareCoupon() {
            _request
                .get('/storeCoupon/hasShareCashCoupon', {
                    pageNo: this.pageNo,
                    pageSize: this.pageSize,
                    userId: uni.getStorageSync('userid')
                })
                .then((res) => {
                    if (res.data.code == 200) {
                        let CouponLists = this.CouponList;

                        if (this.pageNo > 1) {
                            CouponLists = [...CouponLists, ...res.data.data.records];
                        } else {
                            CouponLists = res.data.data.records;
                        }

                        this.setData({
                            CouponList: CouponLists
                        });
                    }
                })
                .catch((error) => {
                    console.log(error, 'error');
                });
        },

        // 获取可用现金券
        getUserCoupon(show) {
            if (show) {
                uni.showNavigationBarLoading(); // 顶部加载状态
            }

            _request
                .get('/storeCoupon/getCashCoupon', {
                    pageNo: this.pageNo,
                    pageSize: this.pageSize,
                    userId: uni.getStorageSync('userid')
                })
                .then((res) => {
                    if (res.data.code == 200) {
                        let CouponLists = this.CouponList;

                        if (this.pageNo > 1) {
                            CouponLists = [...CouponLists, ...res.data.data.records];
                        } else {
                            CouponLists = res.data.data.records;
                        }

                        this.setData({
                            CouponList: CouponLists
                        });
                    } else {
                    }

                    if (show) {
                        uni.hideNavigationBarLoading(); //完成停止加载

                        uni.stopPullDownRefresh(); //停止下拉刷新
                    }
                })
                .catch((error) => {
                    if (show) {
                        uni.hideNavigationBarLoading(); //完成停止加载

                        uni.stopPullDownRefresh(); //停止下拉刷新
                    }

                    console.log(error, 'error');
                });
        },

        // 修改现金券id
        setshareCashCoupon(id) {
            _request
                .get('/storeCoupon/shareCashCoupon', {
                    id
                })
                .then((res) => {})
                .catch((error) => {
                    console.log(error, 'error');
                });
        },

        // 撤回现金券
        onRepeal(e) {
            let vm = this;
            uni.showModal({
                content: '确定撤销现金券吗？',

                success(res) {
                    if (res.confirm) {
                        _request
                            .get('/storeCoupon/cancelShare', {
                                id: e.currentTarget.dataset.id
                            })
                            .then((res) => {
                                if (res.data.code == 200) {
                                    vm.getShareCoupon();
                                }
                            })
                            .catch((error) => {
                                console.log(error, 'error');
                            });
                    } else if (res.cancel) {
                    }
                }
            });
        },

        shop() {
            console.log('占位：函数 shop 未声明');
        },

        onClose() {
            console.log('占位：函数 onClose 未声明');
        },

        mpsj() {
            console.log('占位：函数 mpsj 未声明');
        }
    }
};
</script>
<style>
/* pages/redenvelope/index.wxss */
/* 红包 */
.redenvelope {
    padding: 20rpx 20rpx 150rpx 20rpx;
    margin-bottom: 200rpx;
}

.envelopebox {
    width: 710rpx;
    background: #ffffff;
    border-radius: 10px;
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    margin-top: 20rpx;
    padding: 38rpx 20rpx 0 20rpx;
    box-sizing: border-box;
}

.c-text3 {
    height: 34rpx;
    font-size: 24rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ff8722;
    line-height: 34rpx;
    position: absolute;
    top: 20rpx;
    right: 20rpx;
}

.text {
    font-size: 35rpx;
    position: absolute;
    top: 70rpx;
    right: 70rpx;
}

.rd-box {
    width: 564rpx;
    height: 52rpx;
    background: #fffbf7;
    border: 1px solid #ff8722;
    border-radius: 26px;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    padding-left: 12rpx;
    box-sizing: border-box;
    margin-bottom: 38rpx;
}

.rd-boxs {
    border: 1px solid #fff !important;
    background: #fff !important;
}

.bg-color {
    border: 1px solid #999999;
}

.e-text1 {
    font-size: 24rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #666666;
    line-height: 52rpx;
}

.e-text2 {
    font-size: 24rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #ff1b0b;
    line-height: 52rpx;
}

.e-text3 {
    font-size: 28rpx;
    color: #ff1b0b;
    line-height: 52rpx;
}

.e-color {
    color: #999999;
}

.re-text {
    height: 62rpx;
    line-height: 62rpx;
    border-top: 1px solid #e4e4e4;
    margin: 0 20rpx;
    font-size: 24rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #666666;
    line-height: 62rpx;
}

.bagbtn {
    width: 155rpx;
    height: 52rpx;
    background: #ff8722;
    box-shadow: 0px 4px 9px 0px rgba(255, 135, 34, 0.42);
    border-radius: 26px;
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #ffffff;
    line-height: 52rpx;
    text-align: center;
    padding: 0;
    margin: 0;
}

.bagbtns {
    flex: 1;
    text-align: center;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.bagbtncsloe {
    width: 155rpx;
    height: 52rpx;
    color: #ff8722;
    border: 2rpx solid #ff8722;
    border-radius: 26px;
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: 500;
    line-height: 52rpx;
    text-align: center;
    padding: 0;
    margin: 0 20rpx 0 0;
}

.bg-f {
    background: #ffffff;
    box-shadow: 0px 1px 29px 0px rgba(0, 0, 0, 0.04);
}

.img {
    width: 95rpx;
    height: 95rpx;
    border-radius: 50%;
}

.statustext {
    position: absolute;
    right: 20rpx;
    top: 30rpx;
    width: 86rpx;
    height: 35rpx;
    border: 1px solid #ff8722;
    border-radius: 5px;
    font-size: 24rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #ff8722;
    line-height: 35rpx;
    text-align: center;
}

.statustext1 {
    position: absolute;
    right: 20rpx;
    top: 30rpx;
    width: 86rpx;
    height: 35rpx;
    border: 1px solid #999999;
    border-radius: 5px;
    font-size: 24rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #999999;
    line-height: 35rpx;
    text-align: center;
}

.typebox {
    width: 81rpx;
    height: 28rpx;
    display: flex;
    justify-content: center;
    position: absolute;
    align-content: center;
    top: 0;
    left: 30rpx;
}

.type-img {
    width: 81rpx;
    height: 28rpx;
}

.type-text {
    font-size: 20rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #ffffff;
    width: 81rpx;
    padding-left: 14rpx;
    line-height: 28rpx;
    position: absolute;
}

.re-title {
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: bold;
    color: #333333;
    /* line-height: 24rpx; */
    width: 70%;
}

.rd-btn {
    width: 710rpx;
    height: 90rpx;
    background: #ff8722;
    border-radius: 45px;
    font-size: 36rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #f3f3f3;
    line-height: 90rpx;
    text-align: center;
    margin: 50rpx 20rpx;
    position: fixed;
    bottom: 0;
}

/* 现金券 */
.cardbox {
    width: 710rpx;
    background: #ffffff;
    box-shadow: 1px 1px 4px 1px rgba(231, 231, 231, 0.4);
    border-radius: 6px;
    background: #ffffff;
    margin: 20rpx 20rpx 0rpx 20rpx;
    position: relative;
    padding: 28rpx 0;
}

.card {
    width: 88rpx;
    height: 28rpx;
    background: #ff8722;
    border-radius: 5px 0px 5px 0px;
    position: absolute;
    top: 0;
    left: 0;
    font-size: 20rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ffffff;
    line-height: 28rpx;
    text-align: center;
}

.box1 {
    padding: 0 30rpx;
    border-right: 1px solid #eaeaea;
}

.my-1 {
    font-size: 44rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ff8722;
}

.my-2 {
    font-size: 60rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ff8722;
}

.box2 {
    padding: 0 30rpx;
}

.type {
    height: 44rpx;
    font-size: 32rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 44rpx;
}

.scope {
    height: 34rpx;
    font-size: 24rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
    line-height: 34rpx;
    margin-top: 16rpx;
}

.time {
    height: 34rpx;
    font-size: 24rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
    line-height: 34rpx;
    margin-top: 16rpx;
}

.status-text1 {
    height: 34rpx;
    font-size: 24rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ff8722;
    line-height: 34rpx;
    text-align: right;
    padding-right: 10rpx;
    position: absolute;
    top: 20rpx;
    right: 40rpx;
}

.status-text3 {
    height: 34rpx;
    font-size: 24rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ff1717;
    line-height: 34rpx;
    text-align: right;
    padding-right: 10rpx;
    position: absolute;
    top: 20rpx;
    right: 40rpx;
}

.status-text2 {
    height: 34rpx;
    font-size: 24rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ff8722;
    line-height: 34rpx;
    text-align: right;
    padding-right: 10rpx;
    position: absolute;
    top: 20rpx;
    right: 40rpx;
}

.repeal {
    width: 152rpx;
    height: 48rpx;
    background: #ff8722;
    box-shadow: 0px 2px 4px 0px rgba(255, 128, 0, 0.26);
    border-radius: 13px;
    font-size: 28rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ffffff;
    line-height: 48rpx;
    text-align: center;
    position: absolute;
    bottom: 60rpx;
    padding: 0;
    right: 20rpx;
}

.btn {
    width: 152rpx;
    height: 48rpx;
    background: #ff8722;
    box-shadow: 0px 2px 4px 0px rgba(255, 128, 0, 0.26);
    border-radius: 13px;
    font-size: 28rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ffffff;
    line-height: 48rpx;
    text-align: center;
    position: absolute;
    bottom: 20rpx;
    padding: 0;
    right: 20rpx;
}

.right {
    width: 116rpx;
    height: 100%;
    background: #f12b2d;
    font-size: 28rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.outmoded {
    width: 710rpx;
    height: 40rpx;
    background: #fff1e4;
    border-radius: 0px 0px 6px 6px;
    font-size: 20rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ff1717;
    line-height: 40rpx;
    text-align: center;
}

/* 收红包 */
.wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    position: relative;
}

.wrapperbox {
    width: 750rpx;
    display: flex;
    justify-content: center;
    height: 911rpx;
    top: -100rpx;
    position: relative;
}

.hb-bg {
    width: 750rpx;
    height: 911rpx;
    position: absolute;
    z-index: 2;
}

.hx {
    width: 1px;
    height: 114rpx;
    background: #ffffff;
    position: absolute;
    bottom: 100rpx;
    left: 360rpx;
}

.icon {
    position: absolute;
    z-index: 3;
    bottom: 36rpx;
    left: 330rpx;
}

.hb-title {
    z-index: 3;
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #c1631e;
    position: absolute;
    display: flex;
    justify-content: center;
    top: 130rpx;
    left: 210rpx;
    width: 300rpx;
}

.hb-title1 {
    z-index: 3;
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #c1631e;
    position: absolute;
    display: flex;
    justify-content: center;
    top: 130rpx;
    left: 130rpx;
    width: 400rpx;
}

.headimg {
    width: 51rpx;
    height: 51rpx;
    margin-right: 13rpx;
}

.hb-btn {
    z-index: 3;
    width: 357rpx;
    height: 87rpx;
    position: absolute;
    bottom: 306rpx;
    left: 185rpx;
}

.hb-btn text {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    text-align: center;
    line-height: 68rpx;
    font-family: PingFang SC;
    font-weight: bold;
    color: #9b4f00;
    font-size: 34rpx;
}

.btnimg {
    width: 357rpx;
    height: 87rpx;
}

.hb-text {
    font-size: 24rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #ffe9c5;
    position: absolute;
    z-index: 3;
    left: 274rpx;
    bottom: 265rpx;
}

.hb-text1 {
    position: absolute;
    font-size: 24rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #c1631e;
    z-index: 3;
    top: 380rpx;
    left: 210rpx;
}

.hb-text2 {
    font-size: 24rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #ffe9c5;
    position: absolute;
    z-index: 3;
    left: 240rpx;
    bottom: 265rpx;
}

.money {
    font-family: PingFang SC;
    font-weight: bold;
    color: #ff1b0b;
    position: absolute;
    z-index: 3;
    top: 240rpx;
    /* left: 270rpx; */
    width: 100%;
    text-align: center;
}

.money1 {
    font-family: PingFang SC;
    font-weight: bold;
    color: #ff1b0b;
    position: absolute;
    z-index: 3;
    top: 260rpx;
    left: -14rpx;
    width: 100%;
    text-align: center;
}

.money text:nth-child(1) {
    font-size: 36rpx;
}

.money text:nth-child(2) {
    font-size: 60rpx;
}

.wrappergivebox {
    width: 596rpx;
    height: 523rpx;
    position: relative;
    top: -120rpx;
    left: -20rpx;
    display: flex;
    justify-content: center;
}

.give-bg {
    width: 596rpx;
    height: 523rpx;
    position: absolute;
}

.give-text1 {
    width: 340rpx;
    text-align: center;
    font-size: 24rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #ea4a34;
    line-height: 32rpx;
    position: absolute;
    z-index: 3;
    top: 40rpx;
    left: 150rpx;
    word-break: break-all;
}

.give-text2 {
    width: 100%;
    text-align: center;
    font-size: 72rpx;
    font-family: PingFang SC;
    font-weight: 800;
    color: #ea4a34;
    line-height: 35rpx;
    position: absolute;
    z-index: 3;
    top: 157rpx;
    left: 20rpx;
}

.give-text3 {
    width: 100%;
    text-align: center;
    font-size: 18rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #ea4a34;
    line-height: 35rpx;
    position: absolute;
    z-index: 3;
    top: 304rpx;
    left: 30rpx;
}

.hbgive-btn {
    z-index: 3;
    width: 357rpx;
    height: 87rpx;
    position: absolute;
    top: 414rpx;
    left: 140rpx;
    font: inherit !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    line-height: unset !important;
    text-align: inherit !important;
    /* width: unset !important; */
    color: inherit !important;
    /* position: initial !important; */
    box-sizing: inherit !important;
    border: unset !important;
    min-height: unset !important;
    display: block !important;
}

.hbgive-btn text {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    text-align: center;
    line-height: 68rpx;
    font-family: PingFang SC;
    font-weight: bold;
    color: #9b4f00;
    font-size: 34rpx;
}

.icon1 {
    position: absolute;
    bottom: -140rpx;
    left: 288rpx;
    z-index: 3;
}

.cashtabbox {
    margin: 20rpx;
}

.cashtab {
    font-size: 28rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    /* font-weight: 500; */
    color: #999999;
    margin-right: 50rpx;
}

.cashtabactive {
    font-size: 28rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    margin-right: 50rpx;
}
</style>
